<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——基本选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body{font-size: 12px;}
        .clsFrame{width:300px;height:100px;}
        .clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px;}
        .clsDiv{background-color:#eee;}
    </style>
</head>
<body>
    <div class="clsFrame">
        <div id="oneDiv">ID</div>
        <div class="clsDiv">Class</div>
        <span>span1</span>
    </div>
    <span>span2</span>
</body>
<script type="application/javascript">
    // 基本选择器是使用最频繁的选择器，由元素id、class、元素名、多个选择符组成
    $(function () {
        /*ID匹配*/
        $('#oneDiv').css('display','block');
        /*Class匹配*/
        $('.clsDiv').css('display','block');
        /*元素名匹配*/
        $('span').css('display','block');
        /*多个元素符组合*/
        $('.clsFrame span').css('background-color','red'); // 包含关系，即下一级
        $('#oneDiv,.clsDiv').css('background-color','blue'); // 并列的关系，即是或的关系
    });

</script>
</html>